<template>
  <div class="problemList bg-f2">
    <div class="bg-f2 bg-fff">
      <div class="addMargin">
        <el-form :inline="true" class="formLine">
          <el-form-item class="formLine_item">
            <el-button class="increased btnSizeStyle" icon="el-icon-plus" @click="addUser('录入电压电流')">录入电压电流</el-button>
          </el-form-item>
          <el-form-item class="formLine_item" label="品牌:">
            <el-select v-model="searchBox.PP" :no-data-text="tiText1" clearable placeholder="请选择">
              <el-option v-for="item in brandList" :no-data-text="brandTip" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="formLine_item" label="类型:">
            <el-select v-model="searchBox.LX" :no-data-text="tiText1" clearable placeholder="请选择" @change="changeF">
              <el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="formLine_item">
            <el-input v-model.trim="searchBox.XH" clearable placeholder="输入型号" prefix-icon="el-icon-search"></el-input>
          </el-form-item>
          <el-form-item class="formLine_item">
            <el-button @click="searchBtn()" class="btnSizeStyle" type="primary">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-table
        border
        stripe
        :header-cell-style="{ backgroundColor: '#ECF3FC', color: '#333', height: '48px', borderBottom: '1px solid #CEE1F7' }"
        highlight-current-row
        ref="multipleTable"
        :data="tableList"
        style="width: 100%"
        :default-sort="{ prop: 'deviceName' }"
        v-loading="tableLoad"
        @sort-change="sortthiscolumn"
      >
        <!-- 提示语句 -->
        <template slot="empty">{{ tableMessage }}</template>
        <el-table-column type="index" label="序号" min-width="50" align="center"></el-table-column>
        <el-table-column prop="brandl_name" label="品牌" min-width="80" show-overflow-tooltip></el-table-column>
        <el-table-column prop="model" label="型号" min-width="100"></el-table-column>
        <el-table-column prop="types" label="类型" min-width="100">
          <template slot-scope="scope">{{ scope.row.types === 1 ? '直流' : '交流' }}</template>
        </el-table-column>
        <el-table-column prop="min_voltage" label="最低限制电压(V)" min-width="100"></el-table-column>
        <el-table-column prop="max_voltage" label="最高限制电压(V)" min-width="100"></el-table-column>
        <el-table-column prop="min_current" label="最低限制电流(A)" min-width="100"></el-table-column>
        <el-table-column prop="max_current" label="最高限制电流(A)" min-width="100"></el-table-column>
        <el-table-column label="备注" min-width="100">
          <template slot-scope="scope"><span :class="[scope.row.remarks ? 'haveLinks' : 'fc_c0c4cc']" @click="seeRemarks(scope.row.remarks)">查看</span></template>
        </el-table-column>
        <!-- <el-table-column prop="xjrzsxm" label="添加人" min-width="100"></el-table-column> -->
        <el-table-column label="添加时间" prop="createDate" width="150" sortable>
          <template slot-scope="scope">{{ scope.row.createDate | dateFormat }}</template>
        </el-table-column>
        <el-table-column label="操作" align="right" min-width="150" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" class="Btn_nan" @click="addUser('编辑电压电流', scope.row)">编辑</el-button>
            <span class="operation"></span>
            <el-button type="text" size="small" class="color_f56f6f Btn_nan" @click="deteleJD(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row class="page-row">
        <el-col :span="12"></el-col>
        <el-col :span="12" style="height: 47px; display: table">
          <el-pagination
            background
            small
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next"
            :total="countList"
          ></el-pagination>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import { ziC, dydl } from '@/utils/allUrl.js'
// import { endLoading } from '@/utils/loading.js'
import { timeLoad, tableMessageText } from '@/assets/js/setTime'
import { setUrl } from '@/utils/getUrl'
export default {
  data: function () {
    return {
      brandList: [], // 品牌
      typeList: [
        { label: '直流', value: 1 },
        { label: '交流', value: 2 },
      ], // 类型
      brandTip: '暂无数据', // 品牌提示
      searchBox: {
        PP: '',
        LX: '',
        XH: '',
      }, // 搜索条件
      currentPage: 1, // 当前页
      pageSize: 10, // 每页条数
      tableMessage: '', // 列表提示
      tableTimer: null,
      tableLoad: false, // 表格加载中样式
      dialogVisibleDetele: false, // 是否删除页面
      tableList: [],
      countPage: 0,
      countList: 0,
      deleteID: '', // 删除id
      pickerBeginDateBefore: {
        // 设置只能选择到今天及以前的日期
        disabledDate(time) {
          return time.getTime() >= Date.now()
        },
      },
      tiText1: '暂无数据', // 机构提示
      listQuery: {
        sortby: '',
        order: '',
      },
    }
  },
  watch: {
    tableLoad(newVal, oldVal) {
      this.tableTimer = setTimeout(() => {
        if (this.tableLoad) {
          this.tableLoad = false
          this.tableMessage = tableMessageText
          this.tableList = []
          // this.countList = 0
        }
      }, timeLoad)
    },
  },
  created: function () {
    this.initBrand() // 品牌
    this.initList()
  },
  mounted() {},
  methods: {
    sortthiscolumn(column) {
      // 排序
      this.tableLoad = true // 加载中样式
      if (column.order === 'descending') {
        this.listQuery.sortby = column.prop.toUpperCase()
        this.listQuery.order = 'DESC' // 降序
      } else if (column.order === 'ascending') {
        this.listQuery.sortby = column.prop.toUpperCase()
        this.listQuery.order = 'ASC' // 升序
      } else {
        this.listQuery.sortby = ''
        this.listQuery.order = '' // 没有排序
      }
      this.request()
    },
    changeF(value) {},
    // 获取品牌
    async initBrand() {
      var arr = []
      const { data: res } = await this.$http.post(`${ziC}pp/list`)
      switch (res.code) {
        case '0000':
          res.data.list.forEach((item) => {
            const k = {
              value: item.id,
              label: item.ppmc,
            }
            arr.push(k)
          })
          this.brandList = arr
          break
        default:
          this.brandList = []
          this.brandTip = res.message
          break
      }
    },
    // 获取数据
    async initList() {
      this.currentPage = 1
      this.pageSize = 10
      this.searchBox = {
        PP: '',
        LX: '',
        XH: '',
      }
      this.request()
    },
    // 发送请求
    async request() {
      clearTimeout(this.tableTimer)
      this.tableLoad = true
      const params = new URLSearchParams()
      params.append('M_', this.currentPage)
      params.append('N_', this.pageSize)
      params.append('model', this.searchBox.XH) // 型号
      params.append('brand', this.searchBox.PP) // 品牌
      params.append('types', this.searchBox.LX) // 类型
      params.append('order', this.listQuery.sortby) // 排序字段
      params.append('sort', this.listQuery.order) // DESC降序 ASC升序
      const { data: res } = await this.$http.post(`${ziC}standard/selectStandard`, params)
      this.tableLoad = false // 表格加载中样式
      // console.log(res)
      switch (res.code) {
        case '0000': // 操作成功
          this.countList = res.data.count
          res.data.list.forEach((item) => {
            if (item.zp) {
              item.zp = JSON.parse(item.zp)
              if (item.zp.length === 0) {
                item.zp = null
              }
            }
          })
          this.tableList = res.data.list
          break
        default:
          this.tableList = []
          this.tableMessage = res.message
          this.countList = 0
          break
      }
    },
    // 查询
    searchBtn() {
      this.currentPage = 1
      this.pageSize = 10
      this.request()
    },
    handleSizeChange(e) {
      this.currentPage = 1
      this.pageSize = e
      this.request()
    },
    handleCurrentChange(e) {
      this.currentPage = e
      this.request()
    },
    // 录入/编辑
    addUser(title, scope) {
      if (title === '录入电压电流') {
        this.$router.push({
          path: '/editVoltageCurrent', // 路由
          query: {
            // 传递参数
            title: 0,
          },
        })
      } else {
        setUrl('voltageCurrentList', JSON.stringify(scope))
        this.$router.push({
          path: '/editVoltageCurrent', // 路由
          query: {
            // 传递参数
            title: 1,
          },
        })
      }
    },
    // 查看
    seeRemarks(remarks) {
      if (!remarks) {
        return
      }
      this.$alert(remarks, '备注', {
        confirmButtonText: '关闭',
        callback: (action) => {},
      })
    },
    // 删除
    deteleJD(row) {
      this.$alert('您确定要删除吗？', '提示', {
        cancelButtonText: '取消',
        confirmButtonText: '确定',
        showCancelButton: true,
      })
        .then(() => {
          this.deleteItem(row)
        })
        .catch(() => {})
    },
    async deleteItem(row) {
      const params = new URLSearchParams()
      params.append('id', row.id)
      const { data: res } = await this.$http.post(`${dydl}standard/deleteStandard`, params)
      switch (res.code) {
        case '0000':
          this.$message.success(res.message)
          this.initList()
          break
        default:
          this.$message.error(res.message)
          break
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.addMargin {
  .increased {
    background: rgba(103, 194, 58, 1);
    font-size: 14px;
    color: #fff;
    text-align: center;
  }
  .formLine {
    margin: 0;
    float: left;
    .formLine_item {
      padding: 0;
      margin-bottom: 15px;
    }
  }
}
.addMargin:after {
  content: '';
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.el-table {
  border: 1px solid #eaeaea;
  border-bottom: 0;
  .operation {
    display: inline-block;
    margin: 0 5px;
    height: 10px;
    border-left: 1px solid #b3b3b3;
  }
  .Btn_nan {
    padding: 0;
  }
  .usersNumber {
    cursor: pointer;
    overflow: hidden;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    white-space: nowrap;
    position: relative;
  }
  .usersNumber:after {
    content: '...';
    text-align: right;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 10%;
    height: 1.8em;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
  }
}
.fooer_box {
  height: 48px;
  line-height: 47px;
  padding: 0 15px;
  box-sizing: border-box;
  border-top: none;
  border: 1px solid #eaeaea;
  border-top: 0;
  display: flex;
  justify-content: space-between;
  .el-pagination {
    padding: 6px 5px;
  }
}
.dialogText {
  font-size: 14px;
  color: #333;
  .star {
    color: #f56c6c;
  }
  .contentFont {
    display: inline-block;
    width: 103px;
    color: #7a7a7a;
    text-align: right;
  }
  .lineHight .el-row {
    line-height: 40px;
    border: none;
  }
}
.fc_c0c4cc {
  color: #c0c4cc;
}
</style>
